<template>
  <div id="index">
    <div class="header">
      <component :is="header"></component>
    </div>
    <!-- 中间内容-->
    <div class="middle">
      <div class="content">
        <b-row>
          <!-- 左侧内容 -->
          <b-col cols="8">
            <div class="left-aside">
              <!-- 搜索框 -->
              <b-row>
                <el-col class="selectItem" :span="3" v-show="showOptions">
                  <el-select v-model="value" @change="selectTable(value)">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col class="select" :span="7">
                  <b-form-input placeholder="请输入搜索内容" v-model="title"></b-form-input>
                  <div class="select-icon" @click="selectTable()">
                    <span class="iconfont icon-sousuo1"></span>
                  </div>
                </el-col>
              </b-row>
              <!-- 搜索框end -->
              <!-- 收集表展示 -->
              <div class="collection">
                <div class="tit">
                  <div class="title">
                    <span>活动总览:</span>
                  </div>
                  <div class="title_left">
                    <span></span>
                  </div>
                  <!-- 发布信息表按钮 -->
                  <div class="publish-msg">
                    <b-button id="publish-msg" v-show="showPublishBtn" @click="skipTable()">
                      <span class="iconfont icon-fabuxuqiu"></span>
                    </b-button>
                    <b-tooltip target="publish-msg" variant="light" triggers="hover">发布收集表</b-tooltip>
                  </div>
                  <!-- 发布信息表end -->
                </div>
                <!-- 收集表展示 -->
                <b-row>
                  <b-col cols="6" v-for="(item,index) in collectionData" :key="index">
                    <b-card :title="item.title" @click="skipDetails(item.collectionId)">
                      <div id="collect-icon">
                        <span>{{item.likeNum}}</span>
                        <span
                          @click="collect = !collect"
                          class="iconfont"
                          :class="{'icon-shoucang':!collect,'icon-shoucangdianjihou':collect}"
                          :style="[{'color': collect ? 'red' : 'rgb(83, 83, 83)'}]"
                        ></span>
                      </div>
                      <b-card-text v-html="item.info"></b-card-text>
                      <b-row class="details">
                        <div class="time">
                          <b-card-text>{{item.statusValue}}</b-card-text>
                          <b-card-text>已参与人数: {{item.constraint}}</b-card-text>
                          <b-card-text>开始时间:{{item.startTime}}</b-card-text>
                          <b-card-text>结束时间:{{item.endTime}}</b-card-text>
                        </div>
                        <span class="iconfont icon-chakanxiangqing4"></span>
                      </b-row>
                    </b-card>
                  </b-col>
                </b-row>

                <!-- 分页区域 start-->
                <el-pagination
                  background
                  layout="prev, pager, next"
                  @current-change="skipPage"
                  :total="total"
                  :page-size="pageSize"
                  :current-page="pageNum"
                ></el-pagination>
                <!-- 分页区域 end-->
              </div>
              <!-- 收集表展示end -->
            </div>
          </b-col>
          <!-- 左侧内容end -->
          <!-- 右侧内容 -->
          <b-col cols="4">
            <div class="right-aside">
              <component :is="notice"></component>
            </div>
          </b-col>
          <!-- 右侧内容end -->
        </b-row>
      </div>
    </div>
    <!-- 中间内容end -->
    <!-- 底部 -->
    <div class="footer">
      <component :is="footer"></component>
    </div>
    <!-- 底部end -->
  </div>
</template>
<script>
// 导入传值中转站bus
import bus from "../bus.js";
// 导入组件
import StudentsIndex from "../components/StudentsIndex.vue";
import TeacherIndex from "../components/TeacherIndex.vue";
import StudentHeader from "../components/StudentHeader.vue";
import TeacherHeader from "../components/TeacherHeader.vue";
import Footer from "../components/Footer.vue";
export default {
  name: "index",
  data() {
    return {
      showPublishBtn: false,
      showOptions: true,
      notice: "StudentsIndex",
      header: "StudentHeader",
      footer: "Footer",
      // 搜索下拉框
      options: [
        {
          value: "1",
          label: "全部"
        },
        {
          value: "2",
          label: "可填"
        }
      ],
      value: "1",
      // 收集表展示
      collectionData: [],
      pageNum: 1,
      total: 0,
      pages: 0,
      pageSize: 10,
      title: "",
      // 收集表展示end
      // 分页
      collect: false,
      // 登录页面传的值
      dataFromLogin: []
    };
  },
  // 注册组件
  components: {
    StudentsIndex,
    TeacherIndex,
    StudentHeader,
    TeacherHeader,
    Footer
  },
  created() {
    // 获取登录页面的值
    this.dataFromLogin = JSON.parse(sessionStorage.getItem("toIndexForm"));
    console.log(this.dataFromLogin);
    // 判断跳转哪个页面
    this.skipIndex();
    // 获取列表信息
    this.selectTable();
  },
  methods: {
    // 判断跳转哪个主页
    skipIndex() {
      if (this.dataFromLogin.typeValue == "学生") {
        this.notice = "StudentsIndex";
        this.header = "StudentHeader";
      } else if (this.dataFromLogin.typeValue == "老师") {
        this.showPublishBtn = true;
        this.showOptions = false;
        this.notice = "TeacherIndex";
        this.header = "TeacherHeader";
      }
    },
    // 跳转老师发布信息页
    skipTable() {
      this.$router.push({ path: "/teacherRelease" });
    },
    // 跳转学生信息表详情
    skipDetails(collectionId) {
      if (this.dataFromLogin.typeValue == "学生") {
        this.$router.push({
          path: "/studentsDetails" + "?collectionId=" + collectionId
        });
      } else if (this.dataFromLogin.typeValue == "老师") {
        this.$router.push({
          path: "/teacherDetails" + "?collectionId=" + collectionId
        });
        }
    },
    // 根据页码跳转
    skipPage: function(pageNum) {
      this.$get(
        this.$urlPath.collection +
          "/collection/normal/" +
          this.value +
          "/" +
          pageNum +
          "/" +
          this.pageSize +
          "?title=" +
          this.title
      )
        .then(resp => {
          if (resp.code == 200) {
            this.collectionData = resp.data.list;
            this.total = resp.data.total;
            this.pageSize = resp.data.pageSize;
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查询收集表列表
    selectTable(params) {
      this.$get(
        this.$urlPath.collection +
          "/collection/normal/" +
          this.value +
          "/" +
          this.pageNum +
          "/" +
          this.pageSize +
          "?title=" +
          this.title
      )
        .then(resp => {
          if (resp.code == 200) {
            if (resp.data.list == null) {
              this.collectionData = null;
              this.$message({
                message: "暂无数据",
                type: "error"
              });
            } else {
              this.collectionData = resp.data.list;
              this.total = resp.data.total;
              this.pageSize = resp.data.pageSize;
            }
            console.log(resp);
          }
        })
        .catch(error => {
          return this.$message.error(resp.message);
        });
    }
  }
};
</script>
<style lang="less">
@import "../assets/less/index.less";
// * {
//   font-family: abc;
// }
</style>